<!--*******************************************************************-->
<!--* AJAX Portal: LiveView version                                   *-->
<!--* @author Sergei Sokolov                                          *-->
<!--* @version 1.0 (28 Jan 2010)                                      *-->
<!--*******************************************************************-->

<html>
<head>

<link type="text/css" rel="stylesheet" href="styles/portlet_blue.css">

<link type="text/css" rel="stylesheet" href="styles/container_nodecoration_common.css">
<link type="text/css" rel="stylesheet" href="styles/container_window_common.css">
<link type="text/css" rel="stylesheet" href="styles/container_standard_common.css">
<link type="text/css" rel="stylesheet" href="styles/container_accordion_common.css">
<link type="text/css" rel="stylesheet" href="styles/container_tabs_common.css">

<link id="portletBuster" type="text/css" rel="stylesheet" href="styles/buster_default.css">

<link id="portletWindow" type="text/css" rel="stylesheet" href="styles/container_window_default.css">
<link id="portletStandard" type="text/css" rel="stylesheet" href="styles/container_standard_default.css">
<link id="portletAccordion" type="text/css" rel="stylesheet" href="styles/container_accordion_default.css">
<link id="portletMenu" type="text/css" rel="stylesheet" href="styles/container_tabs_default.css">

<script type="text/javascript" language="javascript" src="scripts/common.js"></script>
<script type="text/javascript" language="javascript" src="scripts/portlet.js"></script>
<script type="text/javascript" language="javascript" src="scripts/container.js"></script>
<script type="text/javascript" language="javascript" src="scripts/portal.js"></script>

<script type="text/javascript" language="javascript" src="scripts/drag.js"></script>
<script type="text/javascript" language="javascript" src="scripts/ajax.js"></script>

<style type="text/css">
    .main {
        width:100%; 
        border-collapse:collapse; 
        padding: 0; 
        margin: 0;
    }

    .main th,
    .main td {
        border: 3px solid white; 
    }
    .main th {
        background-color: silver;
    }

    td {
        vertical-align: top;
    }

    td.standard, td.accordion, td.tabs {
        padding: 0; 
        height: 100%;
    }

    td.standard {
        margin: 2px; 
    }

    td.standard, td.accordion {
        background-color: #EEEEEE;
    }
</style>

<script type="text/javascript">


    function setTheme(theme) {
        portletWindow.href = "styles/container_window_" + theme + ".css";
        portletStandard.href = "styles/container_standard_" + theme + ".css";
        portletAccordion.href = "styles/container_accordion_" + theme + ".css";
        portletMenu.href = "styles/container_tabs_" + theme + ".css";

        portletBuster.href = "styles/buster_" + theme + ".css";
    }

    function setState(state) {
        var container = window.portal.portletContainers[0];
        if (container) {
            container.setState(state);
        }
    }

    /******************************************************/

    function hideFistPortlet() {
        if (window.portal.portletContainers.length >0 
            && window.portal.portletContainers[0].portlets.length > 0) {

            window.portal.portletContainers[0].portlets[0].hide();
            window.portal.portletContainers[0].refresh(); 
        }
    }

    function minimazeAllHiddenPortlets() {
        if (window.portal.portletContainers.length > 0) { 
            for (var i = 0; i < window.portal.portletContainers[0].portlets.length; i++) { 
                var state = window.portal.portletContainers[0].portlets[i].getState();
                if (state == com.sokolov.portal.Portlet.STATE_HIDDEN) {
                    window.portal.portletContainers[0].portlets[i].minimaze(); 
                }  
            } 
            window.portal.portletContainers[0].refresh();
        }
    }

    /******************************************************/

    function startPortalEvent() {
        alert("Hello, Ajax Portal!!!");
        com.sokolov.portal.Portal._supportDragAndDrop();

        injectHttpContent("ajax_test.html", 
                          "polygon6Content");

//         $('p3Irame').contentWindow.document.body.style.backgroundColor='blue';
    }
    com.sokolov.portal.Portal.startOnLoad(startPortalEvent);

</script>
</head>

<body>

<form name="frm">
    <b>State:</b>
    <input type="radio" name="state" onclick="setState(com.sokolov.portal.Container.STATE_NODECORATION);">&nbsp;no decoration
    <input type="radio" name="state" onclick="setState(com.sokolov.portal.Container.STATE_WINDOW);">&nbsp;window
    <input type="radio" name="state" onclick="setState(com.sokolov.portal.Container.STATE_STANDARD);" checked="checked">&nbsp;standard
    <input type="radio" name="state" onclick="setState(com.sokolov.portal.Container.STATE_ACCORDION);">&nbsp;accordion
    <input type="radio" name="state" onclick="setState(com.sokolov.portal.Container.STATE_TABS);">&nbsp;tabs
    <br>

    <b>Theme</b>
    <input type="radio" name="theme" onclick="setTheme('default');" checked="checked">&nbsp;default
    <input type="radio" name="theme" onclick="setTheme('blue');">&nbsp;blue
    <input type="radio" name="theme" onclick="setTheme('silver');">&nbsp;silver
    <br><br>

    <input type="button" value="Hide first content area" onclick="hideFistPortlet();">
    <input type="button" value="Minimaze hidden portles" onclick="minimazeAllHiddenPortlets();">
</form>

<table class="main">
<tr>
    <th>Container #1</th>
    <th>Container #2 (drag and grop any markered portlet in this container)</th>
</tr>
<tr>
<td id="pc1" class="standard dropTarget" title="Window" style="width: 50%;">

<!--
<div id="pc1" class="standard" title="Window" style="">
--><!--

--><div id="polygon1" class="portlet titleEditable" title="Content area 1" help="content/help_poligon1.html">
Text
<b>bold</b>
<i>italic</i>
</div><!--

--><div id="polygon2" class="portlet draggable" title="Content area 2" url="ajax_test.html">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><!--

--><div id="polygon3" class="portlet draggable" title="Content area 3" help="content/help_poligon3.html">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>

</div><!--

-->

<!--</div>-->


</td><td id="pc2" class="standard dropTarget" title="Window" style="width: 50%;">


</td></tr></table>



<div id="polygon4" class="portlet draggable" title="Content area 4">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>

<div id="polygon5" class="portlet titleEditable" title="Content area 5">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>

<div id="polygon6" class="portlet titleEditable draggable " title="Content area 6" help="content/help_poligon6.html">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>


<div id="polygon7" class="portlet" title="Content area 7">
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>


<!--
<div id="pc2" class="standard" title="Window" style="border: 1px solid black; padding: 8px; margin: 0;">

</div>
-->

</body>
</html>


